import React, { Component } from 'react'
import "./news.scss"
import { Pagination , Carousel } from 'antd';
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'  
import { getApiNoticeBanner , getApiNotice , getApiNoticeTypeList , getApiHonerInfo } from "../../axios/api"
import { get, UrlSearch } from '../../axios/localstorage';

export default class news extends Component {

    state = {
        banner:[],
        currentIndex:0,
        type:'',
        typeList:[],
        page:1,
        total:1,
        list:[],
    }

    componentWillMount(){

        let honor = UrlSearch('honor');

        let index = UrlSearch('index')?parseInt(UrlSearch('index')):0

        getApiNoticeTypeList({
            type:2,
            types:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        })
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;

                if(honor){
                    this.setState({
                        type:"",
                        typeList:data,
                    })
                    setTimeout(()=>{this.getHonor(1)},50);
                    return false;
                }

                this.setState({
                    typeList:data,
                    type:data[index].id,
                    ntitle:data[index].title,
                })

                setTimeout(()=>{

                    this.getData(1);
                    
                },50)
            }
        }).catch(err =>{
            console.error(err);
        })

        getApiNoticeBanner({
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        })
        .then( req =>{
            if(req.data.code === 1){
                this.setState({
                    banner:req.data.data
                })
            }
        }).catch( err =>{
            console.error(err);
        })

        
    }

    onChange=(index)=>{
        this.setState({
            currentIndex:index
        })
    }

    changePage=(page)=>{
        console.log(page);
        this.setState({
            page
        })
        setTimeout(()=>{
            this.getData(page);
            
        },50)
    }
    changePage2=(page)=>{
        console.log(page);
        this.setState({
            page
        })
        setTimeout(()=>{
            this.getHonor(page);
            
        },50)
    }

    getData=(page)=>{
        console.log(page);
        let param = {
            page,
            type_id:this.state.type,
            city:get('city'),
            type:get('type')?get('type'):0,
            // content:get('city')?get('city'):get('mechanism'),
        }

        // this.props.history.push('/notice');

        getApiNotice(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    list:data.list,
                    total:data.total
                })
            }else{
                this.setState({
                    list:[],
                    total:0,
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    getHonor=()=>{
        let param = {
            page:this.state.page,
            city:get('city'),
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        }

        getApiHonerInfo(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    total:data.count,
                    list:data.list
                })
            }else{
                this.setState({
                    list:[],
                    total:0,
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    render() {
        return (
            <div className='news'>
                <Header />
                <div className='bannerBox'>
                    <div className='banner'>
                        <Carousel ref="bslide" dots={false} draggable={true} afterChange={(index)=>{this.onChange(index)}} autoplay={true} autoplaySpeed={3000}>
                            {
                                this.state.banner.map((item,index)=>{
                                    return <div className='item' key={index}>
                                                <div className="bg" style={{backgroundImage:"url('"+item.image+"')"}}></div>
                                            </div>
                                })
                            }
                        </Carousel>
                    </div>
                </div>
                <div className='page'>
                    <div className='pm'>
                        <div className='phead'>
                            {
                                this.state.typeList.map((item,index)=>{
                                    return <div className={this.state.type === item.id?'phi pchosen':'phi'} onClick={()=>{this.setState({type:item.id});setTimeout(()=>{this.getData(1)},50)}}>
                                                <h2>{item.title}</h2>
                                                <span></span>
                                            </div>
                                })
                            }
                            {/* <div hidden={!get('mechanism')} className={this.state.type === ""?'phi pchosen':'phi'} onClick={()=>{this.setState({type:"",page:1});setTimeout(()=>{this.getHonor(1)},50)}}>
                                <h2>荣誉展示</h2>
                                <span></span>
                            </div> */}
                        </div>

                        

                        <div className='pbox'>
                            {
                                this.state.list.map((item,index)=>{
                                    return <div className='card' onClick={()=>{this.props.history.push('/newsinfo?id='+item.id);}}>
                                                <div className='cimg' style={{backgroundImage:"url('"+item.thumb_text+"')"}}></div>
                                                <div className='cright'>
                                                    <div className='ctext'>
                                                        <h2>{item.title}</h2>
                                                        <p>{item.create_time}</p>
                                                    </div>
                                                    <h4>{item.content}</h4>
                                                </div>
                                            </div>
                                })
                            }

                            <div className="none" hidden={this.state.list.length !== 0}>
                                <div className="cen">
                                    <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                </div>
                                <p>暂无此类新闻</p>
                            </div>
                        </div>

                        {/* <div className='pbox2' hidden>
                            {
                                this.state.list.map((item,index)=>{
                                    return <div className='card' onClick={()=>{this.props.history.push('/honorinfo?id='+item.id);}}>
                                                <div className='cimg' style={{backgroundImage:"url('"+item.thumb_text+"')"}}></div>
                                                <div className='ctext'>
                                                    <h2>{item.title}</h2>
                                                    <p>{item.summary}</p>
                                                    <div className='cdiv'>
                                                        <img alt="" className='icon' src="assets/img/shijain.png" />
                                                        <h4>{item.createtime}</h4>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                })
                            }

                            <div className="none" hidden={this.state.list.length !== 0}>
                                <div className="cen">
                                    <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                </div>
                                <p>暂无相关荣誉</p>
                            </div>
                        </div> */}

                        <div className='r_page'>
                            <Pagination showSizeChanger={false} pageSize={10}  defaultCurrent={this.state.page} total={this.state.total} onChange={(page)=>{this.changePage(page)}} />
                        </div>
                        
                    </div>
                </div>

                <Footer />
            </div>
        )
    }
}
